vue 在组件中自定义v |
您所在的位置：网站首页 › 子组件v-model props › vue 在组件中自定义v |
vue 在组件中自定义v
|
先来个官方解释 自定义组件的 v-model 我们来实践一下： 在子组件中： - 子组件的count:{{ count }} + export default { name: '', components: {}, model: { prop: 'count', // 定义传递给v-model的那个变量，绑定到哪个属性值上 event: 'change-count'// event:什么时候触发v-model行为 }, props: { // 需要在组件的 props 选项里声明 count 这个 prop count: { type: Number, default: 0 } }, methods: { sub() { this.$emit('change-count', this.count - 1) }, add() { this.$emit('change-count', this.count + 1) } } }在子组件中，我们更改了model的选项prop: 'count'、event: 'change-count'，如果默认不更改的话，那么model的默认值将是 model: { prop: 'value', event: 'input' },这里的prop的值应该在组件的prop定义，所以我们在prop里面定义了count props: { count: { type: Number, default: 0 } },触发事件需要用到$emit，然后根据自己定义的事件更新值即可 this.$emit('change-count', this.count - 1)然后在父组件中使用就简单很多了，只需要绑定一个变量即可： 父组件的goodCount:{{ goodCount }} import Stepper from './components/Stepper' export default { name: 'Test', components: { Stepper }, props: {}, data() { return { goodCount: 0 } } }然后我们通过观察就可以知道实现了组件的双向数据绑定了 再举个例子给大家试一下 export default { name: '', components: {}, model: { prop: 'count', // event:什么时候触发v-model行为 event: 'input' // 定义传递给v-model的那个变量，绑定到哪个属性值上 }, props: { // 需要在组件的 props 选项里声明 count 这个 prop count: { type: null, default: '' } } |
【本文地址】
今日新闻 |
推荐新闻 |